<template>
  <div class="comp1">
    <v-chart class="chart"
             :option="option"
             autoresize />
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';

use([CanvasRenderer, BarChart, GridComponent]);

export default defineComponent({
  name: 'Comp1',
  components: {},
  setup() {
    const option = ref({});
    // 注意：在onMounted dom 挂载页面之后赋值option 才能触发autoresize
    onMounted(() => {
      option.value = {
        animation: true,
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
    });
    return { option };
  }
});
</script>

<style lang="less" scoped>
.comp1 {
  height: 100%;
  .chart {
  }
}
</style>